<template>
  <div class="avatar-container" >
    <img
      v-show= "isShow"
      @load="imgLoad"
      class="avatar-img"
      :src="url"
      :class="{circle:shape==='circle'}"
      :style="{ width: size + 'px', height: size + 'px' }"
    />
    <skeleton
    v-show= "!isShow"
    :width="size + 'px'" :height="size + 'px'" animated bg="lightgray" :isCircle="flag"/>
  </div>
</template>

<script>
import skeleton from './skeleton.vue'
export default {
  name: 'avatar-vue',
  props: {
    url: {
      // 图片路径
      type: String,
      // 设置默认头像
      default: 'http://101.34.0.144:3001/images/avatar/default.png'
      // default: 'http://localhost:3001/images/avatar/default.png'
    },
    size: {
      type: Number,
      default: 100
    },
    shape: {
      type: String,
      default: 'circle'
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  computed: {
    flag () {
      if (this.shape === 'circle') {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    imgLoad () {
      this.isShow = true
    }
  },
  components: {
    skeleton
  },
  created () {
    // console.log(this.shape)
  }
}
</script>

<style scoped>
.avatar-img {
  border-radius: 10%;
  object-fit: cover;
  display: block;
}
.circle{
  border-radius: 50%;
}
</style>
